<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('下派退回配置')"/>
    <link th:href="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.css}" rel="stylesheet">
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal" id="form-config-add" name="form-config-add" th:object="${goBackConfig}">
        <input name="pkId" th:value="${goBackConfig.pkId}" type="hidden">
        <div class="form-group col-sm-12">
            <label class="col-sm-4 control-label" style="color: firebrick;">是否允许下级退回：</label>
            <div class="col-sm-8" style="color: firebrick;">
                <label class="check-box">
                    <input name="isAllow" value="0" type="radio" th:checked="${goBackConfig.isAllow == 0}">允许
                </label>
                <label class="check-box">
                    <input name="isAllow" value="1" type="radio" th:checked="${goBackConfig.isAllow == 1}">不允许
                </label>
            </div>
        </div>
        <div class="form-group col-sm-12" id="selectDept">
            <label class="col-sm-4 control-label is-required">请配置不允许退回部门：</label>
            <div class="col-sm-8">
                <!--disabled-->
                <select name="isAll" id="isAll" class="form-control" required="required">
                    <option value="">-请选择-</option>
                    <option value="100" th:selected="${goBackConfig.isAll == 100}">所有部门</option>
                    <option value="101" th:selected="${goBackConfig.isAll == 101}">部分部门</option>
                </select>
            </div>
        </div>
        <div class="form-group col-sm-12 hidden" id="selectNoGoBackDept">
            <label class="col-sm-4 control-label is-required">请选择不允许退回部门：</label>
            <div class="col-sm-8">
                <textarea type="text" name="noGoBackDeptNames" class="form-control" id="noGoBackDeptNames"
                          placeholder=""
                          autocomplete="off" th:placeholder="请选择不允许退回部门"
                          onclick="selectNoGoBackDeptAll()" style="width: 100%;height: 95px;"
                          th:text="${noGoBackDeptNames}">
                </textarea>
                <input type="hidden" name="noGoBackDeptIds" id="noGoBackDeptIds">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "system/mTelWF/rManage";
    var isAllow = [[${goBackConfig.isAllow}]]

    $(function () {
        let isAll = $('#isAll').val();
        if (isAllow == 0) {
            $('#selectDept').addClass('hidden')
        } else {
            $("#selectDept").removeClass("hidden")
        }
        if (isAll == 101) {
            $("#selectNoGoBackDept").removeClass("hidden")
        }
    });

    //确认
    function submitHandler() {
        if ($.validate.form()) {
            var data = $('#form-config-add').serializeArray();
            $.operate.save(prefix + "/isGoBackConf", data);
        }
    }

    //事件监听
    $('input').on('ifChecked', function (event) {
        var menuType = $(event.target).val();
        let isAll = $('#isAll').val();
        if (menuType === "1") {
            $("#selectDept").removeClass("hidden")
            if (isAll == 101) {
                $("#selectNoGoBackDept").removeClass('hidden')
            }
        } else {
            $('#selectDept').addClass('hidden')
            $("#selectNoGoBackDept").addClass('hidden')
        }
    })

    //选择部门
    $("#isAll").change(function (e) {
        let isAll = $('#isAll').val();
        if (isAll == 101) {
            $("#selectNoGoBackDept").removeClass('hidden')
        } else {
            $("#selectNoGoBackDept").addClass('hidden')
        }
    })

    function selectNoGoBackDeptAll() {
        var config = {
            id: 'selectNoGoBackDeptDialog',
            title: '选择不允许退回部门<span style="color:red;margin-left: 30px;">双击选中部门</span>',
            width: '1050',
            height: '550',
            url: prefix + '/NoGoBackDeptAll',
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                top.layer.close(index);
            }
        };
        $.modal.openOptions(config);
    }

    function noGoBackDept(idS, nameS) {
        $('#noGoBackDeptNames').val(nameS);
        $('#noGoBackDeptIds').val(idS);
    }
</script>
</body>
</html>
